// src/components/MembersTable.tsx
import { ApartmentOutlined } from '@ant-design/icons';
import { Avatar, Button, Input, Pagination, Table } from 'antd';
import React, { useState } from 'react';
import './MembersTable.scss';

const { Search } = Input;

// 原始数据项
const originalData = {
  name: '熊大',
  studentId: '2015140831',
  phone: '19552232314',
  email: '7854394@qq.com',
  department: '前端组',
  action: '移除',
};

// 生成 13 条相同的数据
const dataSource = Array.from({ length: 15 }, (_, index) => ({
  key: index.toString(),
  ...originalData,
}));

const MembersTable: React.FC = () => {
  const [current, setCurrent] = useState(1);

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => (
        <div>
          <Avatar style={{ backgroundColor: '#52C41A' }}>熊大</Avatar>
          <span style={{ marginLeft: 8 }}>{text}</span>
        </div>
      ),
    },
    {
      title: '学号',
      dataIndex: 'studentId',
      key: 'studentId',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (text: string) => <span style={{ color: 'red' }}>{text}</span>,
    },
  ];

  return (
    <div className="members-table-container" style={{ position: 'relative', minHeight: '100vh', paddingBottom: '60px' }}>
      <div className="members-table-header" style={{ display: 'flex', alignItems: 'center' }}>
        <ApartmentOutlined style={{ fontSize: '24px', marginRight: '8px' }} />
        <h2 style={{ marginBottom: 0 }}>智链Link</h2>
        <div className="members-table-actions" style={{ marginLeft: 'auto' }}>
          <Search placeholder="搜索" className="members-table-search" />
          <Button type="primary" className="members-table-add-button">+ 添加成员</Button>
          <Button className="members-table-export-button">导出成员</Button>
        </div>
      </div>
      <Table dataSource={dataSource} columns={columns} pagination={false} />
      <div className="pagination-fixed" style={{ textAlign: 'center', marginTop: '20px' }}>
        <span>第 {current} - {Math.min(current * 11, dataSource.length)} 条 共 {dataSource.length} 条</span>
        <Pagination
          current={current}
          onChange={setCurrent}
          total={dataSource.length}
          pageSize={11}
        />
      </div>
    </div>
  );
};

export default MembersTable;
